<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<c:url value='/resources/styles/main.css' />" type="text/css"/>
    <script type="text/javascript" src="<c:url value='/resources/scripts/datePicker/WdatePicker.js' />"></script>

    <script type="text/javascript">
        function insertRow() {

            var num = 0;

            var x = document.getElementById('newbody');

            var tr = document.createElement("tr");

            var td0 = document.createElement("td");

            var td1 = document.createElement("td");

            var td2 = document.createElement("td");

            var seqInput = document.createElement("input");
            seqInput.type = "text";
            seqInput.name = "aseq";
            seqInput.id = "aseq";

            var titleInput = document.createElement("textarea");
//            titleInput.type = "text";
            titleInput.name = "atitle";
            titleInput.id = "atitle";

            var btnInput = document.createElement("input");

            btnInput.type = "button";

            btnInput.value = "delete";

            btnInput.onclick = function () {

                deleteRow(btnInput);

            };

            td0.appendChild(seqInput);
            td1.appendChild(titleInput);
            td2.appendChild(btnInput);

            tr.appendChild(td0);
            tr.appendChild(td1);
            tr.appendChild(td2);

            x.appendChild(tr);
        }

        function deleteRow(obj) {

            var r = obj.parentNode.parentNode;
            var x = document.getElementById('newbody');
            x.removeChild(r);

        }
    </script>
    <title>问题添加</title>
</head>
<body>

<table class="pagination" style="padding-left: 70px;">
    <tr>
        <td>
            <a href="<c:url value='/admin/survey/listSurvey.do' />">返回问题列表</a>
        </td>
    </tr>
</table>
<form id="addFolder" name="addFolder" action="<c:url value='/admin/survey/addSurveyAction.do' />" method="post">

    <%--序号：<input type="text" id="seq" name="seq" style="margin-top: 3px;margin-left: 3px;"/> </br>--%>
    <%--问卷名称： <select id="questionnaireId" name="questionnaireId">--%>
    <%--<c:forEach var='data' items="${questions}">--%>
    <%--<option value=${data.id} ${data.id==questionnaireId? 'selected':''}>${data.title}</option>--%>
    <%--</c:forEach>--%>
    <%--</select>    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--%>
    <%--问题类型: &nbsp;&nbsp;&nbsp;&nbsp;<select id='type' name='type'>--%>
    <%--<option value="single">单选</option>--%>
    <%--<option value='multiple'>多选</option>--%>
    <%--<option value='ask'>问答</option>--%>
    <%--</select>  </br>--%>
    <%--主问题：   <input type="text" id="title" name="title" style="margin-top: 3px;margin-left: 3px;"/> </br>--%>
    <%--</br>--%>
    <%--副问题：<input type="text" id="titleOther" name="titleOther" style="margin-top: 3px;margin-left: 3px;"/><span>副问题将会以问答题的形式出现</span> </br>--%>

    <table class="list">

        <tr>
            <td>序号</td>
            <td>
                <input type="text" id="seq" name="seq" style="margin-top: 3px;margin-left: 3px;"/>
            </td>
        </tr>
        <tr>
            <td>问卷名称</td>
            <td>
                <select id="questionnaireId" name="questionnaireId">
                    <c:forEach var='data' items="${questions}">
                        <option value=${data.id} ${data.id==questionnaireId? 'selected':''}>${data.title}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td>问题类型</td>
            <td>
                <select id='type' name='type'>
                    <option value="single">单选</option>
                    <option value='multiple'>多选</option>
                    <option value='ask'>问答</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>主问题</td>
            <td>
                <input type="text" id="title" name="title" style="margin-top: 3px;margin-left: 3px;"/>
            </td>
        </tr>
        <tr>
            <td>副问题</td>
            <td>
                <input type="text" id="titleOther" name="titleOther" style="margin-top: 3px;margin-left: 3px;"/><span>副问题将会以问答题的形式出现</span>
            </td>
        </tr>

    </table>


    </br>
    <h4>添加问题备选答案</h4>
        <table class="list" id="tableObj">

        <tr>
            <th scope="col">序号</th>
            <th scope="col">答案</th>
            <th scope="col"><input type="button" value="Add" onclick="insertRow();"/></th>
        </tr>

        <tbody id="newbody"></tbody>
            <tr>
                <td colspan="3"><input type='submit' value="提交"/></td>
            </tr>
    </table>

</form>
</body>
</html>